<template>
    <div class="menu_bg">
        <div class="menu">
            <div class="nav">
                <div class="nav_t"  @mouseenter="showNav" @mouseleave="hiddenNav">全部商品分类</div>
                <div class="leftNav" :class="{hidden:isHidden}">
                    <ul>      
                        <li v-for="(item,index) in categories1" :key="index" @mouseenter="showNav" @mouseleave="hiddenNav">
                            <div class="fj" @mouseenter="enterLi($event,item.id)" @mouseleave="leaveLi($event)" >
                                <span class="n_img"><span></span><img  src="../../assets/images/nav1.png" /></span>
                                <span class="fl">{{ item.name }}</span>
                            </div> 
                          
                            <div class="zj" >
                                <div class="zj_l">
                                    <!-- 二级分类 -->
                                    <div class="zj_l_c" v-for="item in parentCategory.childCategories" :key=" item.id">
                                        <h2 @click="changeProducts(item.id)">{{ item.name }}</h2>
                                        <!-- 三级分类 -->
                                         <a v-for="item1 in item.childCategories" :key="item1.id" class="spanHover" @click="changeProducts(item1.id)">{{ item1.name }} |</a>
                                        <!-- <router-link :to="{name:'GoodsList',params:{'categoryLevel3Id':item.id}}" v-for="item1 in item.childCategories" :key="item1.id">{{ item.name }}</router-link>| -->
                                    </div>
                                </div>

                                <div class="zj_r">
                                    <a href="#"><img src="../../assets/images/n_img1.jpg" width="236" height="200" /></a>
                                    <a href="#"><img src="../../assets/images/n_img2.jpg" width="236" height="200" /></a>
                                </div>
                            </div>   
                        </li>
                    </ul>            
                </div>           
            </div>
    
            <ul class="menu_r">                                                                                                                                         
                <li><router-link to="/front-index">首页</router-link></li>
                <li v-for="item in categories1" :key="item.id"><a  @click="changeProducts(item.id)">{{ item.name }}</a></li>
            </ul>
            <div class="m_ad">中秋送好礼！</div>
         </div>
    </div>
</template>

<script>
export default {
    name:'CategoryNav',
    props:['categories1','isHidden'],
    data:function(){
        return{
            isShow:this.isHidden,
            parentCategory:{},
        }
    },
    mounted(){
    },
    methods:{
        //点击一级导航栏
        changeProducts(categoryId){
            //将分类id存放到vuex中
            this.$store.commit('changeCategoryId',categoryId);
            if(this.$route.name!=="GoodsList"){
                this.$router.push({name:'GoodsList',params:{'categoryId':categoryId}});
            }else{
                //更新vuex中的products
                this.getProductFromEs(1,2,categoryId);
            }
        },
         //从es中获取数据
        getProductFromEs(pageNum,pageSize,categoryId){
            this.$axios({
                url:'/easybuy/products/index',
                params:{
                    pageNum,
                    pageSize,
                    categoryId,
                }
            }).then(rs=>{
                console.log("存放到vuex中的数据",rs.data.pageInfo.list,categoryId);
                //将商品信息放到vuex中
                this.$store.commit('changeProducts',rs.data.pageInfo.list);

                //将pageInfo存放到vuex中
                this.$store.commit('changePageInfo',rs.data.pageInfo);
            })
        },
        showNav(){
            if(this.$route.name == "FrontIndex"){
                this.isHidden = false;
                return;
            }
            this.isHidden = false;
        },
        hiddenNav(){
            if(this.$route.name == "FrontIndex"){
                this.isHidden = false;
                return;
            }
            this.isHidden = true;
        },
        enterLi(e,id){
            //根据一级分类标题查询出所有子标题
            this.getById(id);
            e.target.classList='fj nuw';
        },
        leaveLi(e){
           e.target.classList='fj';
        },
        //根据parentId获取分类信息
        // getCategoryByPId(parentId){
        //     this.$axios({
        //         url:'/easybuy/category/'+parentId
        //     }).then(rs=>{
        //         console.log("this.categoryList",rs);
        //         this.categoryList = rs.data.categoryList;
        //         //循环遍历每个类别，将其子级类别查询出来    
        //         for(let i=0;i<this.categoryList.length;i++){
        //            this.categoryList[i] = this.getById(this.categoryList[i].id);
        //         }
        //     })
        // },
        //根据id查找分类，并将其子级分类全部查询出来
        getById(id){
            this.$axios({
                url:'/easybuy/category/getById',
                params:{
                    id
                }
            }).then(rs=>{
                console.log("rs",rs);
                this.parentCategory = rs.data.category;
                return rs.data.category;
            })
        }
    }
}
</script>

<style scoped>
    .spanHover:hover{
        color: red;

    }
    .spanHover{
        cursor: pointer;
    }
    .leftNav .fj:hover + .zj {
        display: block;
    }
    .zj:hover{
        display: block;
    }
    .hidden{
        display: none;
    }
</style>